import React, { useState, useEffect } from "react"
import Taro from "@tarojs/taro"
import { Image, View } from "@tarojs/components"
import "./index.scss"
import { getHeaderHeight } from "../../utils"
import backIcon from "../../assets/images/icon_back.png"

export default function NavBar(props) {
  const {
    title,
    className,
    backgroundColor = null,
    placeholdHeight = true,
    actionBack = null,
    leftIcon = backIcon,
  } = props
  const [headerTop, setHeaderTop] = useState(20)
  const [headerHeight, setHeaderHeight] = useState(60)

  useEffect(() => {
    let { top, height } = Taro.getMenuButtonBoundingClientRect()
    setHeaderTop(top)
    setHeaderHeight(height)
  }, [])
  return (
    <View style={{ height: `${placeholdHeight ? headerTop + headerHeight + "px" : "auto"}` }}>
      <View className={`component-navbar ${className || ""}`} style={{ backgroundColor: backgroundColor }}>
        <View style={{ height: headerTop + "px" }}></View>
        <View className="navbar-content" style={{ height: headerHeight + "px" }}>
          <View className="navbar-left">
            <View
              className="nav-back-wrap"
              onClick={() => {
                if (actionBack != null) {
                  actionBack()
                } else {
                  Taro.navigateBack()
                }
              }}
            >
              <Image src={leftIcon} className="nav-back"></Image>
            </View>
          </View>
          <View className="navbar-title">{title}</View>
          <View className="navbar-right"></View>
        </View>
      </View>
    </View>
  )
}
